<template>
  <view class="my-content">
    <view class="my-content_card">
      <view class="my-content_card_top">
        <view style="margin-bottom: 20rpx;">
          <text>{{ $t('订单编号') }}:</text>
          <text>{{ order_no }}</text>
        </view>
        <!-- <view style="margin-bottom: 20rpx;">
          <text>{{ $t('求购询单价') }}：</text>
          <text>{{ show_desire_price }}</text>
        </view> -->
        <view style="margin-bottom: 20rpx;">
          <text>{{ $t('综合评价') }}：</text>
          <u-rate v-model="multipleValue" :count="multipleCount" active-color="#F38920"
                  inactive-color="#DBDBDB"></u-rate>
        </view>
      </view>
      <view class="my-content_card_bottom">
        <view>
          <text>{{ $t('评价内容') }}：</text>
          <textarea v-model="content" :placeholder="$t('请输入评价内容')" placeholder-style="font-size:25rpx;"
                    style="font-size:25rpx"></textarea>
        </view>
        <view>
          <text>{{ $t('请上传图片') }}：</text>
          <u-upload :action="action" :file-list="fileList" :limitType="limitType" :max-count="imageMaxCount"
                    :max-size="imageMaxSize" @on-success="success" :upload-text="uploadText"></u-upload>
        </view>
        <view style="display: flex;">
          <text style="max-width: 240rpx;">{{ $t('服务态度') }}：</text>
          <u-rate v-model="serviceValue" :count="serviceCount" active-color="#F38920" inactive-color="#DBDBDB"></u-rate>
        </view>
        <view v-if="type === '1'" style="display: flex;">
          <text style="max-width: 240rpx;">{{ $t('产品质量') }}：</text>
          <u-rate v-model="qualityValue" :count="qualityCount" active-color="#F38920" inactive-color="#DBDBDB"></u-rate>
        </view>
        <view v-if="type === '1'" style="display: flex;display: none;">
          <text style="max-width: 240rpx;">{{ $t('产品价格') }}：</text>
          <u-rate v-model="priceValue" :count="priceCount" active-color="#F38920" inactive-color="#DBDBDB"></u-rate>
        </view>
        <view v-if="type === '1'" style="display: flex;">
          <text style="max-width: 240rpx;">{{ $t('发货速度') }}：</text>
          <u-rate v-model="deliveryValue" :count="deliveryCount" active-color="#F38920"
                  inactive-color="#DBDBDB"></u-rate>
        </view>
        <view style="display: flex;">
          <text style="max-width: 240rpx;"
                :style="lang == 'zh' ? 'min-width: 150rpx;' : 'min-width: 240rpx;'">{{ $t('诚信度') }}：
          </text>
          <u-rate v-model="integrityValue" :count="integrityCount" active-color="#F38920"
                  inactive-color="#DBDBDB"></u-rate>
        </view>
        <view v-if="type === '2'" style="display: flex;display: none;">
          <text style="max-width: 240rpx;">{{ $t('付款速度') }}：</text>
          <u-rate v-model="paySpeedValue" :count="paySpeedCount" active-color="#F38920"
                  inactive-color="#DBDBDB"></u-rate>
        </view>
      </view>
    </view>
    <view class="my-content_btn">
      <u-button :custom-style="{
          height: '63rpx',
          background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
          borderRadius: '26rpx',
        }
        " hover-class="none" type="primary" @click="publish11">{{ $t('发布评价') }}
      </u-button>
    </view>
  </view>
</template>

<script>
import {HTTP_REQUEST_URL, IMAGE_MAX_COUNT, IMAGE_MAX_SIZE} from "@/config/app";

export default {
  data() {
    return {
      lang: this.$i18n.locale,
      multipleCount: 5, //综合评价
      multipleValue: 5,//综合评价
      serviceCount: 5,//服务态度
      serviceValue: 5,//服务态度
      qualityCount: 5,//产品质量
      qualityValue: 5,//产品质量
      priceCount: 5,//产品价格
      priceValue: 5,//产品价格
      deliveryCount: 5,//发货速度
      deliveryValue: 5,//发货
      integrityCount: 5,//诚信度
      integrityValue: 5,//诚信度
      paySpeedValue: 5,//付款速度
      paySpeedCount: 5,//付款速度
      fileList: [],
      uploadText: this.$t('选择图片'),
      content: "",
      order_no: "",
      show_desire_price: "",
      order_id: "",
      type: "",
      action: HTTP_REQUEST_URL + '/common/upload',
      imageMaxSize: IMAGE_MAX_SIZE,
      imageMaxCount: IMAGE_MAX_COUNT,
      images: [],
      limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],
    };
  },
  onLoad(options) {
    console.log('评价onLoad', options)
    this.order_no = options.order_no
    this.show_desire_price = options.show_desire_price
    this.type = options.type
    this.order_id = options.order_id
	
	
	this.$u.api.order.findRate({order_id:this.order_id}).then(res => {
		console.log(res)
		if(res.list){
			if(res.type==1){
				uni.redirectTo({
					url:'/pages/order/evaluate/takepart?order_id='+this.order_id+'&type='+'release'
				})
			}else{
				uni.redirectTo({
					url:'/pages/order/evaluate/takepart?order_id='+this.order_id+'&type='+'join'
				}) 
			}
		}
	})
	
	
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("立即评价")
    })
  },
  methods: {
    //发布评价
    publish11() {
      const that = this
      let data = {
        order_id: this.order_id,//订单id
        content: this.content,//内容
        images: this.images,
        total_score: this.multipleValue,
        service_score: this.serviceValue,
        product_score: this.qualityValue,
        integrity_score: this.integrityValue,
        pay_speed_score: this.paySpeedValue,
        goods_speed_score: this.deliveryValue
      }
	  
	  if(this.content==''){
		  uni.showModal({
		  	content:this.$t('请输入内容')
		  })
		  return false
	  }
	  
	  
      this.$u.api.order.saveRate(data).then(res => {
        that.$u.toast(that.$t("评价成功"))
        setTimeout(() => {
          that.$u.route({
            url: "/pages/tabbar/order/index",
            type: "switchTab"
          })
        }, 1500)
      })
    },
    success(data, index, lists, name) {
      this.images.push({url: data.data.fullurl})
    }
  }
}
</script>

<style lang="scss">
.my-content {
  height: calc(100vh - 44px);
  background-color: $my-bgColorF6F6F6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .my-content_card {
    padding: 31.4rpx;
    background-color: $my-bgColorF6F6F6;
    // background-color: #FFFFFF;
    border-radius: 19.19rpx;
    display: flex;
    flex-direction: column;

    .my-content_card_top {
      // height: 169.19rpx;
      border-bottom: 2rpx solid #F0F0F0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 30rpx;
      background: white;
      font-weight: 400;
      color: #000000;
      padding: 24.42rpx;
      // view {
      //   line-height: 30rpx;
      // }
    }

    .my-content_card_bottom {
      font-size: 30rpx;
      background: white;
      padding: 24.42rpx;
      font-weight: 400;
      color: #000000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

.my-content_btn {
  // height: 178rpx;
  background-color: #FFFFFF;
  border-radius: 5rpx;
  padding: 26.16rpx 55.81rpx 26rpx 55.81rpx;
}
</style>
